<template>
    <div>
        <hd-tab :tabs="tabs"/>

        <el-form ref="form" :inline="false" :model="form" label-position="right" label-width="80px" size="normal">
            <el-card class="box-card" shadow="never">
                <div slot="header" class="clearfix">
                    <span>栏目选择</span>
                </div>
                <el-form-item v-if="categories" label="栏目选择">
                    <el-select v-model="form.category_id" placeholder="请选择" style="width: 100%;">
                        <el-option v-for="category in categories" :key="category.id" :disabled="disabled(category)"
                                   :label="category.title" :value="category.id">
                            {{ '-'.repeat(category.level * 3) }}

                            {{ category.title }}
                            <span
                                v-if="disabled(category)"
                                style="float: right;
                                        font-size: 12px;color:red;">
                                         正在使用... </span>
                        </el-option>
                    </el-select>
                    <el-alert
                        description="请选择栏目后，再填写具体内容"
                        show-icon
                        type="info">
                    </el-alert>

                </el-form-item>

            </el-card>

            <el-card v-if="article" shadow="never">
                <hd-alert :alert="{type:'success'}">请填写【系统字段】内容</hd-alert>

                <el-card body-style="padding:'0px'" class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span>系统字段设置</span>
                    </div>
                    <el-form v-for="(field, index) in article.fields" :key="index">
                        <el-form-item v-if="field.show&&field.system" :label="field.title">
                            <component v-bind:is="`field-${field.type}`" :field="field" :form="form"
                                       :value="field.value">
                            </component>
                            <hd-error :name="field.name"/>
                        </el-form-item>

                    </el-form>
                </el-card>
                <hd-alert :alert="{type:'warning'}">请填写【自定义字段】内容</hd-alert>

                <el-card body-style="padding:'0px'" class="box-card" shadow="never">
                    <div slot="header" class="clearfix">
                        <span>自定义字段设置</span>
                    </div>
                        <el-form-item v-if="!field.system" :label="field.title" v-for="(field, index) in article.fields" :key="index">
                            <component v-bind:is="`field-${field.type}`" :field="field" :form="form.fields">
                            </component>
                            <hd-error :name="field.name"/>
                        </el-form-item>
                    <div v-if="article.fields.every(field=>field.hasOwnProperty('system'))">
                        <hd-nullpage></hd-nullpage>
                    </div>
                </el-card>

            </el-card>

            <el-button-group class="mt-3">
                <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-button-group>
        </el-form>
    </div>
</template>

<script>
const form = {
    category_id: null, fields: {}
}
import tabs from './tabs'

export default {
    props: ['id'],
    data() {
        return {
            form: _.merge({}, form),
            tabs,
            categories: null,
            article: null
        }
    },
    async created() {
        this.categories = await axios.get(`admin/category`)
        if (this.id) {
            this.form = await axios.get(`admin/content/${this.id}`)
        }
    },
    watch: {
        //栏目的选择修改
        'form.category_id'() {
            this.article = this.categories.find(category => category.id == this.form.category_id).article
            if (!this.id) {
                //添加时设置初始字段,判断非系统字段
                this.article.fields.forEach((field) => !field.system ?? this.$set(this.form, field.name, ''))
            }

        }
    },
    methods: {
        async onSubmit() {
            if (!this.form.category_id) {
                return this.$message.error('请选择栏目')
            }
            const url = this.id ? `admin/content/${this.id}` : 'admin/content'
            await axios[this.id ? 'put' : 'post'](url, this.form)
            // this.$router.push({name: 'admin.content.index'})
        },
        disabled(category) {
            return (this.form.id && category.path.includes(this.form.path))
        }

    }
}
</script>

<style></style>
